<template>
  <div>
    <div class="hot-navbar">
      <van-nav-bar title="分类热门">
        <template #left>
            <van-icon name="arrow-left"  size="20" color="#323233" @click="back"/>
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
            <div class="content-item">
              <div class="content-item-list">
                <div
                  class="content-item-list-item"
                  v-for="(item, i) in data"
                  :key="i" @click=toVideo(item.id)
                >
                  <div class="content-item-list-item-img">
                    <img v-lazy="item.cover" alt="" />
                  </div>
                  <div class="content-item-list-item-info">
                    <div class="content-item-list-item-info-title">
                      {{ item.title }}
                    </div>
                    <div class="paly">
                      <span>{{ item.count.count_view }}次</span>
                      <span>{{ item.count.count_like }}喜欢</span>
                    </div>
                    <div class="content-item-list-item-info-author">
                      <div class="content-item-list-item-info-author-img">
                        <img v-lazy="item.author.userinfo.avatar" alt="" />
                      </div>
                      <div class="content-item-list-item-info-author-name">
                        {{ item.author.userinfo.username }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
  </div>
</template>
<script>
import axios from "axios";
import VueAxios from "vue-axios";
export default {
  data() {
    return {
      value: "",
      data: [],
      total: 0,
      active: "",
      value1: "hot",
      value2: "a",
      searchList: [],
      option1: [
        { text: "最热门", value: "hot" },
        { text: "最匹配", value: "default" },
        { text: "新发布", value: "addtime" },
      ],
      option2: [
        { text: "最热门", value: "a" },
        { text: "最匹配", value: "b" },
        { text: "新发布", value: "c" },
      ],

    };
  },
  methods: {
    onCancel() {
      this.$router.push("/Search");
    },
    GetSearchResult(kw, sort) {
      axios({
        method: "get",
        url: "https://apis.netstart.cn/xpc/home/cateHot",
        params: {
          kw,
          sort,
        },
      }).then((res) => {
        this.total = res.data.data.total;
        this.data = res.data.data.list;
      });
    },
    onSearch(kw) {
      this.value = kw;
      this.GetSearchResult(this.value);
      const value = this.value.trim();
      if (!value) {
        //判断输入框的值是否为空  如果为空 直接返回不在执行
        return;
      }
      if (this.searchList.indexOf(value) === -1) {
        this.searchList.unshift(value);
        //历史记录最多只取十个
        this.searchList = this.searchList.slice(0, 10);
        localStorage.setItem("keyword", JSON.stringify(this.searchList));
      }
    
    },
    toVideo(id){
      this.$router.push({path:'/Video',query:{id}})
    },
    back(){
        this.$router.go(-1)
    }
  },
  watch: {
    value1() {
      this.GetSearchResult(this.value||this.kw,this.value1);
    },
  
  },
  mounted() {
    this.GetSearchResult(this.$route.query.kw);
    this.searchList = JSON.parse(localStorage.getItem("keyword")) || []; 
  },
};
</script>

<style lang="scss">
    .content {
    padding-bottom: 60px;
  .paly {
    color: #9c9799;
    margin-top: 10px;
    span {
      margin-right: 2vw;
    }
  }
  .content-item {
    .content-item-title {
      font-size: 30px;
      padding: 0 4vw;
      font-weight: bold;
      height: 10.7vw;
      line-height: 10.7vw;
      border-bottom: 1px solid #e5e5e5;
    }
    .content-item-list {
      .content-item-list-item {
        display: flex;
        padding: 4vw;
        border-bottom: 1px solid #e5e5e5;
        .content-item-list-item-img {
          width: 39.8551vw;
          height: 24.1546vw;
          border-radius: 20px;
          overflow: hidden;
          img {
            width: 39.8551vw;
            height: 24.1546vw;
          }
        }
        .content-item-list-item-info {
          flex: 1;
          padding-left: 4vw;
          .content-item-list-item-info-title {
            font-size: 25px;
            font-weight: bold;
            height: 8.7vw;
            line-height: 4.7vw;
            margin-top: 10px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /*从上到下垂直排列子元素*/
            -webkit-line-clamp: 2;
            /*行数，超出三行隐藏且多余的用省略号表示...*/
            line-clamp: 5;
            overflow: hidden;
          }
          .content-item-list-item-info-author {
            display: flex;
            align-items: center;
            margin-top: 20px;
            .content-item-list-item-info-author-img {
              width: 6vw;
              height: 6vw;

              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            .content-item-list-item-info-author-name {
              font-size: 18px;
              padding-left: 2vw;
            }
          }
        }
      }
    }
  }
}
.hot-navbar{
  .van-nav-bar {
    height: 12.2657vw;
   border-bottom: 1px solid #ccc;
  }
  .van-nav-bar__content{
    height: 10.7vw;

    .van-nav-bar__title{
        font-size:25px;
        line-height: 10.7vw;
        
    }
  }
}

</style>